<template>
  <div class="cinemas">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="film-item" v-for="item in list" :key="item.filmId">
        <img class="img" :src="item.poster" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh } from "vant";
import axios from "axios";

export default {
  name: "cinemas",

  // 局部注册组件
  components: {
    [PullRefresh.name]: PullRefresh,
  },

  data() {
    return {
      list: [], // 存放数据
      total: 1, // 总的条数
      pageNum: 1, // 存放当前页数
      pageSize: 10, // 存放每页显示的条数

      isLoading: false, // 是否处于刷新中
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    onRefresh() {
      // console.log(123);
      // 当数据刷新成功之后，需要将 isLoading 设置为 false

      // async 函数返回的是 一个 promise
      // const p = this.getData();
      // console.log(p);

      this.getData().then(() => {
        // 将 isLoading 设置为 false
        this.isLoading = false;
      });
    },

    async getData() {
      try {
        const { data } = await axios.get("/maizuo/gateway", {
          headers: {
            "X-Client-Info":
              '{"a":"3000","ch":"1002","v":"5.2.1","e":"1660376834309632782303233"}',
            "X-Host": "mall.film-ticket.film.list",
          },

          params: {
            cityId: "440300",
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type: 1,
            k: 9962003,
          },
        });

        console.log(data);
        if (data.status === 0) {
          this.list = data.data.films;
          this.total = data.data.total;
        } else {
          this.$toast(data.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
